<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>用户订单</title>
  <link rel="stylesheet" href="cart/css/main.css">
  <script src="js/axios.min.js"></script>
  <script src="js/vue.min.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="ele-2.15.7/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="ele-2.15.7/index.js"></script>
</head>

<body>
<div class="wrap clearfix" id="app">

  <el-container>
    <el-header>
      <div class="location">当前位置：首页<span></span><b class="red">你的订单</b></div>
    </el-header>
    <el-main>
      <el-card class="box-card container-filter" shadow="never">
        <div class="search-top">
          <el-button style="float: right;font-size: 12px" class="el-button--primary" @click="query()">查询结果</el-button>
          <el-button style="float: right;font-size: 12px; margin-right: 15px" @click="empty">重置</el-button>
        </div>
        <div>
          <el-form :inline="true" class="demo-form-inline"
                   style="display: flex; align-items: center">
            <div>
              <el-form-item label="输入搜索:"  >
                <el-input v-model="name" placeholder="商品名称" style="padding-right: 0px;width: 219px"></el-input>
              </el-form-item>

              <el-form-item label="商品状态:"  >
                <el-select v-model="status" placeholder="请选择">
                  <el-option
                          v-for="item in statusOption"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>

          </el-form>
        </div>
      </el-card>
<!--      <div class="location">当前位置：首页<span></span><b class="red">你的订单</b></div>-->
      <el-table :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}"
                stripe
                class="title"
                :data="tableData.data">
        <el-table-column prop="image" label="图片">
          <template slot-scope="scope">
            <el-image
                    style="width: 100px; height: 100px"
                    :src="scope.row.image"
                    fit="contiain">
            </el-image>
          </template>
        </el-table-column>

        <el-table-column prop="proname" label="商品名称"></el-table-column>

        <el-table-column prop="price" label="商品价格"></el-table-column>

        <el-table-column prop="quantity" label="数量"></el-table-column>

        <el-table-column prop="currentprice" label="总金额"></el-table-column>

<!--        <el-table-column prop="status" label="">-->
<!--          <template slot-scope="scope">-->
<!--            <span v-if="scope.row.status == '0'">未支付</span>-->
<!--            <span v-if="scope.row.status == '10'">退货中</span>-->
<!--            <span v-if="scope.row.status == '20'">已支付</span>-->
<!--            <span v-if="scope.row.status == '30'">已完成</span>-->
<!--          </template>-->
<!--        </el-table-column>-->

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                    v-if="scope.row.status == '10'"
                    size="mini"
                    type="danger"
                    @click="remove(scope.row)">取消
            </el-button>
            <el-button
                    v-if="scope.row.status == '20' || scope.row.status == '30'"
                    size="mini"
                    type="danger"
                    @click="rejected(scope.row)">退货
            </el-button>
            <el-button
                    v-if="scope.row.status == '0'"
                    size="mini"
                    type="danger"
                    @click="">审核中...
            </el-button>


            <el-button
                    v-if="scope.row.status == '10'"
                    size="mini"
                    type="danger"
                    @click="">付款
            </el-button>
            <el-button
                    v-if="scope.row.status == '20'"
                    size="mini"
                    type="danger"
                    @click="">待发货
            </el-button>
            <el-button
                    v-if="scope.row.status == '30'"
                    size="mini"
                    type="danger"
                    @click="">已发货
            </el-button>

          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>

<!--  <el-dialog title="付款界面" :visible.sync="dialogFormVisible"  :close-on-click-modal = "false">-->
<!--    <div style="display: flex; justify-content: space-around;" >-->
<!--      <el-form>-->
<!--        <el-form-item label="总金额" :label-width="formLabelWidth">-->
<!--          <el-input-->
<!--                  v-model="amount">-->
<!--          </el-input>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="支付方式" :label-width="formLabelWidth">-->
<!--          <template>-->
<!--            <el-select v-model="paymenttype" placeholder="请选择">-->
<!--              <el-option-->
<!--                      v-for="item in options"-->
<!--                      :key="item.value"-->
<!--                      :label="item.label"-->
<!--                      :value="item.value">-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--          </template>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--    </div>-->
<!--    <div slot="footer" class="dialog-footer">-->
<!--      <el-button @click="dialogFormVisible = false">取 消</el-button>-->
<!--      <el-button @click="saveOrder" type="danger">付 款</el-button>-->
<!--    </div>-->

<!--  </el-dialog>-->

</div>

<!-- 引入JS文件 -->
<script src="cart/js/main.js"></script>
</body>
</html>

<script>
  var vue = new Vue({
    el: "#app",
    data:{
      status: "",
      tableData: {},
      name: "",
      uid: "3",
      statusOption: [{
        value: '',
        label: '全部'
      }, {
        value: '20',
        label: '已完成'
      }, {
        value: '0',
        label: '未支付'
      }],
    },
    created(){
      this.query();
    },
    methods: {
      create(){
        this.dialogFormVisible = true;
      },
      handleSelect(item) {
        console.log(item);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      handleChange(value) {
        this.count();
        console.log(value);
      },
      query() {
        axios.get("QueryUserOrdersServlet.s", {
          params: {
            pname: this.name,
            uid: this.uid,
            status: this.status
          }
        }).then(res => {
          this.tableData = res.data;
        })
      },
      // 退货
      rejected(data){
        this.$confirm('确定退款?', '提示', {
          type: 'warning'
        }).then(() => {
          axios.get("RejectedServlet.s", {
            params: {
              detailid: data.detailid,
              orderid: data.orderid
            }
          }).then(res => {
            this.$message({
              type: 'success',
              message: res.data.msg,
            });
            this.query();
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: "已取消退款!"
          });
        });
      },
      // 添加
      saveOrder(){
        // 构建post参数

        for (let map in this.multipleSelection) {
          // console.info(map);
          // console.info(this.multipleSelection);
          var params = new URLSearchParams();
          for (let name in this.multipleSelection[map]){
            params.append(name, this.multipleSelection[map][name]);
          }

          params.append("uid", this.uid);
          params.append("paymenttype",this.paymenttype);
          // 发送 ajax post 请求
          axios.post("../SaveCardServlet.s", params).then(res=>{
            if (res.data.code == 1){
              this.$message(res.data.msg);
              this.remove1(params);
            } else{
              this.$alert(res.data.msg);
            }
          })

        }
        this.dialogFormVisible = false; // 关闭弹窗
        this.query(); // 刷新表格
      },
      empty() {
        this.name = "";
      },
      // 物理删除
      remove(data) {
        console.info(data);
        this.$confirm('确定取消该订单?', '提示', {
          type: 'warning'
        }).then(() => {
          axios.get("RemoveUserOrdersServlet.s", {
            params: {
              detailid: data.detailid,
              orderid: data.orderid
            }
          }).then(res => {
            this.$message({
              type: 'success',
              message: res.data.msg,
            });
            this.query();
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: "已取消删除!"
          });
        });
      },
    }
  })
</script>
